import { useLoaderData, useNavigation } from "react-router-dom";
import { getPeople } from "../utils/api";
import { List, Skeleton, Avatar, Empty, Spin } from "antd";

export const loader = async () => {
  try {
    const people = await getPeople();
    return { people };
  } catch (error) {
    return error
  }
};

const People = () => {
  const { people } = useLoaderData();
  const navigation = useNavigation();

  if (!people) return <Empty />;

  return navigation.state === "loading" ? (
    <Spin style={{ margin: "50%" }} size="large" />
  ) : (
    <List
      className="demo-loadmore-list"
      itemLayout="horizontal"
      dataSource={people}
      renderItem={(item) => (
        <List.Item
          actions={[
            <a key="list-loadmore-edit">edit</a>,
            <a key="list-loadmore-more">more</a>,
          ]}
        >
          <Skeleton avatar title={false} loading={item.loading} active>
            <List.Item.Meta
              avatar={<Avatar src={item.image} />}
              title={
                <a href="https://ant.design">{`${item.firstName} ${item.lastName}`}</a>
              }
              description={item.university}
            />
          </Skeleton>
        </List.Item>
      )}
    />
  );
};

export default People;
